웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
lodash를 사용하여 자바스크립트의 객체를 복사하는 방법 중 딥클론(Deep cloning) 방법을 알아봅니다.
# lodash를 사용하여 객체 복사하기, _cloneDeep()
먼저 객체 타입을 복사하는 방법은 여러가지가 있습니다. 그 중 하나가 바로 lodash를 사용한 객체 복사 방법입니다. 이때 Shallow Clone과 반대되는 Deep Clone은 복사된 모든 값이 내부 자식 요소를 포함하여 모두 참조 형태가 아닌 새로운 값이 매핑되는 형태로 복사됨을 말합니다. 이 방법을 위해 _.clone()이 아닌 _.cloneDeep()을 사용합니다.
링크 ) Deep clone 및 객체 복사에 대하여 더 많은 정보는 아래를 참고하세요.
https://webisfree.com/2020-02-17/[자바스크립트]-객체를-새로운-객체로-복사-clone하는-방법
그럼 cloneDeep()의 간단한 문법을 알아봅니다.
_.cloneDeep(target)
만약 _.clone()에 대하여 알고 있다면 위와 같은 사용이 매우 익숙 할 것입니다.
! lodash cloneDeep() 예제보기
그럼 간단한 예제를 만들어봅니다. 아래 변수 obj을 복사하여 새로운 값인 newObj을 생성하고자 합니다.
obj = {
a: 10,
b: {
aa: 'abc'
}
};
a: 10,
b: {
aa: 'abc'
}
};
이제 새로운 값 newObj를 복사하여 생성하겠습니다.
newObj = _.cloneDeep(obj);
newObj가 새롭게 Deep Clone(딥클로닝)되어 생성되었습니다. 이제 내부값 b을 포함해 서로 비교해보려고 합니다.
obj === newObj // false
obj.a === newObj.a // false
obj.b === newObj.b // false
obj.a === newObj.a // false
obj.b === newObj.b // false
보시는 것처럼 모든 값, 프로퍼티가 서로 다르다고 false로 나타납니다. 여기서 obj.b의 값이 다른 점이 clone()과 deepClone()의 차이점입니다.
여기까지 객체 복사 방법 중 하나인 lodash의 deepClone()을 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
